<script setup lang="ts">
import { useLocalStore } from "@/views/report/dotline/components/store";
import { getAssetsFile } from "@/utils/map";
import { LMarker, LPolyline } from "@vue-leaflet/vue-leaflet";
import { useMap } from "@/views/report/dotline/components/Map/index.vue";

const props = defineProps({
  deviceCategoryList: Array<any>,
});
const { L }: any = window;
const store = useLocalStore();
const { selectedFeature, visiblePointClassIds, visibleLineClassIds } =
  storeToRefs(store);
const pointOptions = ref();
const lineOptions = ref();

const getIcon = (classId: string) => {
  const pointCategoryList = props.deviceCategoryList?.point;
  if (pointCategoryList) {
    const obj = pointCategoryList.find((item: any) => item.classId === classId);
    if (obj) {
      const { image } = obj;
      const iconUrl = getAssetsFile("device/" + image + ".png");
      return L.icon({
        iconUrl,
        iconSize: [32, 32],
        iconAnchor: [16, 27],
      });
    }
  }
};
const getColor = (classId: string) => {
  const lineCategoryList = props.deviceCategoryList?.line;
  if (lineCategoryList) {
    const obj = lineCategoryList.find((item: any) => item.classId === classId);
    if (obj) {
      const { image } = obj;
      return image;
    }
  }
};

watchEffect(() => {
  try {
    if (selectedFeature.value) {
      const map = useMap();
      const { jsonGeom, classId, lon, lat } = selectedFeature.value;
      if (jsonGeom && classId) {
        const feature = JSON.parse(jsonGeom);
        const { type, coordinates } = feature;
        if (type === "Point") {
          const latlng = [...coordinates].reverse();
          pointOptions.value = {
            latlng,
            icon: getIcon(classId),
            classId,
          };
          if (map) {
            map.setView(latlng, 18);
          }
        }
        if (type === "LineString") {
          const latlngs = coordinates.map((item: any) => [item[1], item[0]]);
          lineOptions.value = {
            latlngs,
            color: getColor(classId),
            classId,
          };
          if (map) {
            const bounds = L.polyline(latlngs).getBounds();
            map.fitBounds(bounds);
          }
        }
        if (type === "Polygon") {
          if (map) {
            const bounds = L.geoJSON(feature).getBounds();
            map.fitBounds(bounds);
          }
        }
      } else if (lon && lat) {
        if (map) {
          const latlng = L.coordConver().gcj02_To_gps84(lon, lat);
          map.setView(latlng, 18);
        }
      } else {
        ElMessage.warning("没有坐标数据！");
      }
    }
  } catch (e) {
    console.log(e);
  }
});
watchEffect(() => {
  if (visiblePointClassIds.value?.length > 0 && pointOptions.value) {
    const { classId } = pointOptions.value;
    if (!visiblePointClassIds.value.includes(classId)) {
      pointOptions.value = null;
      store.setSelectedFeature(null);
    }
  }
  if (visibleLineClassIds.value?.length > 0 && lineOptions.value) {
    const { classId } = lineOptions.value;
    if (!visibleLineClassIds.value.includes(classId)) {
      lineOptions.value = null;
      store.setSelectedFeature(null);
    }
  }
});
</script>

<template v-if="selectedFeature">
  <LMarker
    v-if="pointOptions"
    :lat-lng="pointOptions.latlng"
    :icon="pointOptions.icon"
  />
  <LPolyline
    v-if="lineOptions"
    :lat-lngs="lineOptions.latlngs"
    color="yellow"
  />
</template>

<style scoped lang="scss"></style>
